<template>
  <div class="w1024-wrap">
    <div class="page">
      <div class="tab-items clear">
        <p class="tab-item" @click="dataTypeChange(1)" :class="dataType==1?'selected-item':''">日数据看板</p>
        <p class="tab-item" @click="dataTypeChange(2)" :class="dataType==2?'selected-item':''">月数据看板</p>
      </div>
      <div class="head" style="margin-bottom: 10px;">

        <div class="search-wrap">
          <div class="clear">
            <template v-if="dataType==1">
              <div class="form-item left">
                <p class="form-item-title" style="width: 50px;">类别：</p>
                <div class="form-item-content" style="width: 140px;">
                  <el-select @change="search" style="width: 100px;" v-model="searchData.category" placeholder="请选择">
                    <el-option key="1" label="分配" :value="1"></el-option>
                    <el-option key="2" label="自建" :value="2"></el-option>
                    <el-option key="3" label="汇总" :value="3"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="form-item left">
                <div class="form-item-content">
                  <el-checkbox v-model="searchData.isweek" @change="dateTypeChange(1)">本周</el-checkbox>
                  <el-checkbox v-model="searchData.ismonth" @change="dateTypeChange(2)">本月</el-checkbox>
                </div>
              </div>
              <div class="form-item left">
                <p class="form-item-title" style="width: 100px;">年度：</p>
                <div class="form-item-content" style="width: 230px;">
                  <el-date-picker clearable style="width:230px;" v-model="value1" value-format="yyyy-MM-dd" type="daterange"
                    @change="dataTimeChange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="~ ">
                  </el-date-picker>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="form-item left">
                <p class="form-item-title" style="width: 100px;">年月：</p>
                <div class="form-item-content" style="width: 130px;">
                  <el-date-picker style="width: 130px;" v-model="searchData.yearmonth" value-format="yyyy-MM"
                    type="month" :clearable="false" placeholder="选择年月">
                  </el-date-picker>
                </div>
              </div>
            </template>
            <div class="form-item left">
              <el-button class="left" type="primary" @click="search">查询</el-button>
              <el-button class="left" type="default" @click="reset">重置</el-button>
            </div>
            <div class="form-item right" style="margin-right: 0;">
              <el-button class="add-btn" type="primary left" @click="exportExcel">数据导出</el-button>
            </div>
          </div>
        </div>
      </div>
      <template v-if="list.length">
        <div class="table-wrap">
          <el-table ref="table" row-key="userid" show-summary :summary-method="getSummaries" v-loading="loading"
            size="middle" :data="list" style="width: 100%">
            <el-table-column v-if="dataType==1" prop="realtime" label="日期" min-width="80"></el-table-column>
            <el-table-column v-if="dataType==2" prop="username" label="员工" min-width="80"></el-table-column>
            <el-table-column prop="totalclue" label="线索数量" min-width="70"></el-table-column>
            <el-table-column prop="validclue" label="有效线索" min-width="70"></el-table-column>
            <el-table-column prop="validrate" label="有效率" min-width="60"></el-table-column>
            <el-table-column prop="typea" label="A类客户" min-width="70"></el-table-column>
            <el-table-column prop="typeb" label="B类客户" min-width="70"></el-table-column>
            <el-table-column prop="typec" label="C类客户" min-width="70"></el-table-column>
            <el-table-column prop="customerrate" label="客户转化率" min-width="80"></el-table-column>
            <el-table-column prop="dealclue" label="成交" min-width="56"></el-table-column>
            <el-table-column prop="dealrate" label="转化率" min-width="64"></el-table-column>
            <el-table-column prop="totalamount" label="金额(元)" min-width="64">
              <template slot-scope="scope">
                <span>{{(scope.row.totalamount/100).toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="singleamount" label="客单价(元)" min-width="74">
              <template slot-scope="scope">
                <span>{{(scope.row.singleamount/100).toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="level<3" min-width="50" label="操作">
              <div slot-scope="scope" class="btn-inner clear">
                <router-link v-if="dataType==1"
                  :to="'/crm/datastatisticsdetail/'+scope.row.userid+'/'+scope.row.realtime+'/'+searchData.category"
                  class="btn" title="详情">
                  <img src="../../assets/images/crm/detail.svg" />
                </router-link>
                <router-link v-if="dataType==2"
                  :to="'/crm/monthdatastatisticsdetail/'+scope.row.userid+'/'+searchData.yearmonth+'/'+scope.row.username"
                  class="btn" title="详情">
                  <img src="../../assets/images/crm/detail.svg" />
                </router-link>
              </div>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes"
          prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange"
          :total="totalCount">
        </el-pagination>
      </template>
      <no-data v-if="!loading&&!list.length"></no-data>
    </div>
    <input type="hidden" name="" id="" :value="user" />
  </div>
</template>

<script>
import NoData from '@/components/NoData'
import { baseUrl, setCookie, getCookie, exportExcel } from '@/utils/common'
export default {
  name: 'DataStatistics',
  components: {
    NoData
  },
  data () {
    const that = this
    return {
      baseUrl,
      level: '',
      value1: '',
      dataType: 1,
      dateType: 1,
      loading: false,
      totalCount: 0,
      searchData: {
        shownum: 10,
        pagenow: getCookie('page') ? Number(getCookie('page')) : 1,
        isweek: true,
        ismonth: '',
        starttime: '',
        endtime: '',
        category: 3,
        yearmonth: new Date().Format('yyyy-MM')
      },
      list: [],
      sum: {}
    }
  },
  computed: {
    user () {
      if (this.$store.state.user) {
        this.level = this.$store.state.user.crmLevel
      }
      return this.$store.state.user
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name == 'DataStatisticsDetail') {
      setCookie('page', this.searchData.pagenow, 1)
      sessionStorage.setItem(
        'searchData',
        JSON.stringify({
          type: 'datastatistics',
          data: this.searchData
        })
      )
    }
    next()
  },
  mounted () {
    setCookie('page', 0, -1)
    if (sessionStorage.getItem('searchData')) {
      var data = JSON.parse(sessionStorage.getItem('searchData'))
      if (data.type == 'datastatistics') {
        Object.assign(this.searchData, data.data)
        this.value1 =
          this.searchData.starttime && this.searchData.endtime
            ? [this.searchData.starttime, this.searchData.endtime]
            : ''
      }
      sessionStorage.removeItem('searchData')
    }
    this.getData()
  },
  methods: {
    dataTypeChange (type) {
      if (this.dataType != type) {
        this.dataType = type
        this.reset()
      }
    },
    dateTypeChange (index) {
      if (index == 1) {
        if (this.searchData.isweek) {
          this.searchData.ismonth = ''
        } else {
          this.searchData.isweek = ''
          this.searchData.ismonth = true
        }
      } else {
        if (this.searchData.ismonth) {
          this.searchData.isweek = ''
        } else {
          this.searchData.ismonth = ''
          this.searchData.isweek = true
        }
      }
      this.value1 = ''
      this.searchData.starttime = ''
      this.searchData.endtime = ''
      this.search()
    },
    dataTimeChange (val) {
      console.log(val)
      if (val) {
        this.searchData.isweek = ''
        this.searchData.ismonth = ''
        this.searchData.starttime = val[0]
        this.searchData.endtime = val[1]
      } else {
        this.searchData.isweek = true
        this.searchData.ismonth = ''
        this.searchData.starttime = ''
        this.searchData.endtime = ''
      }
    },
    pageSizeChange (pageSize) {
      this.searchData.shownum = pageSize
      this.getData()
    },
    currentPageChange (page) {
      this.searchData.pagenow = page
      this.getData()
    },
    search () {
      this.searchData.pagenow = 1
      this.getData()
    },
    reset () {
      this.searchData = {
        shownum: 10,
        pagenow: 1,
        isweek: true,
        ismonth: '',
        starttime: '',
        endtime: '',
        category: 3,
        yearmonth: new Date().Format('yyyy-MM')
      }
      this.value1 = ''
      this.getData()
    },
    getData () {
      this.loading = true
      console.log(this.searchData)
      this.$request[
        this.dataType == 1 ? 'queryDataStatistics' : 'queryMonthDataStatistics'
      ](
        this.dataType == 1
          ? this.searchData
          : {
            shownum: 10,
            pagenow: 1,
            yearmonth: this.searchData.yearmonth
          }
      ).then((res) => {
        if (res.code == 0) {
          this.list = res.list
          this.totalCount = res.page.totalresult
          this.sum = res.sumall
        } else {
          this.msgError(res.msg)
        }
        this.loading = false
      })
    },
    getSummaries () {
      var {
        totalclue,
        validclue,
        validrate,
        typea,
        typeb,
        typec,
        customerrate,
        dealclue,
        dealrate,
        totalamount,
        singleamount
      } = this.sum
      return [
        '总计',
        totalclue,
        validclue,
        validrate,
        typea,
        typeb,
        typec,
        customerrate,
        dealclue,
        dealrate,
        (totalamount / 100).toFixed(2),
        (singleamount / 100).toFixed(2)
      ]
    },
    exportExcel () {
      if (this.dataType == 1) {
        this.$request.exportList(this.searchData).then((res) => {
          exportExcel(
            res,
            'crm ' +
              this.searchData.starttime +
              '~' +
              this.searchData.endtime +
              '数据统计表'
          )
        })
      } else {
        this.$request
          .exportMonthDataStatistics({
            shownum: 10,
            pagenow: 1,
            yearmonth: this.searchData.yearmonth
          })
          .then((res) => {
            exportExcel(res, 'crm ' + this.searchData.yearmonth + '数据统计表')
          })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.page {
  .head {
    border-bottom: 10px solid #f5f5f5;
    padding: 0 20px;
  }
  .tab-items {
    height: 50px;
    line-height: 48px;
    background: #fff;
    margin-top: -1px;
    .tab-item {
      width: 120px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #666;
      font-size: 16px;
      float: left;
      background: #f5f5f5;
      cursor: pointer;
    }
    .selected-item {
      line-height: 44px;
      background: #fff;
      border-top: 3px solid #409eff;
    }
  }
  .search-wrap {
    padding: 24px 0 8px;
    .el-button {
      img,
      i {
        margin-right: 3px;
      }
      i {
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  >>> .el-table {
    th {
      > .cell {
        padding-left: 6px;
        padding-right: 6px;
        text-align: center;
      }
    }
    td {
      > .cell {
        padding-left: 4px;
        padding-right: 4px;
        text-align: center;
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
}
</style>
